





<template>
  <div id="app" v-loading="loading" element-loading-text="导出中，请稍后..." element-loading-background="rgba(255, 255, 255, .8)" element-loading-custom-class="boxStyle">
    <button class="btn-box" @click="onClick">导 出</button>
    <HelloWorld></HelloWorld>
    <!-- <img id="zhan" src="https://gitee.com/zq320/pic/raw/master/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240926154226.jpg" style="width:100%;height:135rem" alt=""> -->
    <!-- <div class="echarts-box">
      <div id="profile" style="height:1000px;width: 200px;z-index: 200"></div>
    </div>
    <div style="margin-top:500px">hahah哈哈哈哈哈</div>
    <img src="../src/assets/vue.svg" alt=""> -->
  </div>
</template>

<script setup >
import { postUpload } from "./api/com";
import HelloWorld from "./components/HelloWorld.vue";
import html2canvas from "html2canvas";
import * as echarts from "echarts";
import "echarts-liquidfill";
import { onMounted, ref, onUnmounted } from "vue";
import wx from "weixin-js-sdk";
// declare var webUni: any;
const loading = ref(false)
let fontRem = ref(16);
webUni.getEnv(function (res) {
  // mu.value =JSON.stringify(res)
  if (res.h5) {
    fontRem.value = 16;
    document.getElementById("app").style.width = "700px";
  } else if (res.miniprogram) {
    fontRem.value = 10;
  }
  document.documentElement.style.fontSize = fontRem.value + "px";
  console.log("当前环境：" + JSON.stringify(res));
});

onMounted(() => {
  // drawProfile();
});
const getCaption = (obj, state) => {
  var index = obj.lastIndexOf("/");
  if (state == 0) {
    obj = obj.substring(0, index);
  } else {
    obj = obj.substring(index + 1, obj.length);
  }
  return obj;
};
const base64ToFile = (base64String, fileName) => {
  const arr = base64String.split(",");
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], fileName, { type: mime });
};

const onClick = () => {
  loading.value = true
  setTimeout(() => {
    // document.addEventListener('UniAppJSBridgeReady', function() {
    //     console.log('444444444444')
    //             webUni.navigateTo({
    //                 url: `/pages/my/my?url=55555555555`
    //             });

    // });
    // dpi: 500,
    html2canvas(document.getElementById("content"), {
      allowTaint: true, //是否跨域图像污染画布
      useCORS: true,
      backgroundColor: "#fff",
      scale: 2,
      width: document.getElementById("content").clientWidth,
      height: document.getElementById("content").scrollHeight, //scrollHeight
      scrollX: 0,
      scrollY: 0,
    }).then((canvas) => {
      let urlww = canvas.toDataURL("image/png");

      const fileW = base64ToFile(urlww, "example.png");
      let formData = new FormData();
      formData.append("file", fileW);
      postUpload(formData).then((res) => {
        if (res.success == true) {
          let name = getCaption(res.message, 1);
          loading.value = false
          webUni.reLaunch({
            url: "/pages/index/index?jieTu=" + name,
          });
          webUni.postMessage({
            data: {
              image: name,
            },
          });
        }
      });
      return false;
      // let result = splitStringEvenly(urlww, 30);
      // webUni.reLaunch({
      //   url: "/pages/index/index?jieTu=true",
      // });
      // console.log(result, "result");
      //  webUni.navigateBack()
      //        webUni.navigateBack({
      //       delta: 1, // 返回1个，如果是2，返回2个页面
      // });
      // webUni.postMessage({
      //   data: {
      //     type: result[0],
      //   },
      // });

      // for (var i = 0; i < result.length; i++) {
      //   (function (a) {

      //     //因为setTimeout异步执行的特性，所以定义一个自执行函数，先把i的值传入进来，避免在执行setTimeout的时候i的值变为4。
      //     setTimeout(function () {
      //       console.log(a)

      //       webUni.navigateBack()
      //       webUni.postMessage({
      //         data: {
      //           type: result[a],
      //           sor:a
      //         },
      //       });
      //        webUni.reLaunch({
      //         url: "/pages/index/index",
      //       });
      //     }, 10);
      //   })(i);
      // }

      //  const url = URL.createObjectURL(blob) // 生成临时网络路径
      // wx.miniProgram.navigateTo({ // 跳转时销毁嵌套的h5页面，获取数据
      //   url: `/pages_sub/img?url=${url}` // 直接跳转到另一页面预览生成的图片
      // })

      // 将canvas转换为Blob对象
      // canvas.toBlob((blob) => {
      //   webUni.reLaunch({
      //     url: "/pages/index/index",
      //   });
      //   // webUni.share()
      //   const url = URL.createObjectURL(blob)

      // //   const imgElement = document.getElementById('zhan') as HTMLImageElement;
      // // imgElement.src = url

      //   webUni.postMessage({
      //     data: {
      //       type:  url,
      //     },
      //   });
      // }, "image/png");

      //上传文件
      // this.uploadB64(this.imgUrl)
    });
  });
};
const splitStringEvenly = (str, parts) => {
  let result = [];
  let length = Math.ceil(str.length / parts);

  for (let i = 0; i < parts; i++) {
    result.push(str.slice(i * length, i * length + length));
  }

  return result;
};
</script>

<style lang='scss' scoped>

#app {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.btn-box {
  position: absolute;
  top: 3rem;
  left: 2.5rem;
  height: 2.25rem;

  line-height: 2.25rem;
  padding: 0 1.25rem;
  z-index: 100;

  background: #2e257c;
  color: #fff;
}
.echarts-box {
  width: 500px;
  height: 500px;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
./assets/uni.webview.1.5.4